<template>
  <div class="example-container">
    <h2>可拖拽编辑表格示例</h2>
    <p>展示不同数据类型的编辑效果，支持拖拽排序、增删改操作</p>

    <!-- 引入可拖拽编辑表格组件 -->
    <DraggableEditableTable
        title="产品信息管理表"
        :columns="tableColumns"
        :initialData="initialTableData"
        @update:data="handleDataChange"
        @row-added="handleRowAdded"
        @row-deleted="handleRowDeleted"
        @upload-success="handleUploadSuccess"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import DraggableEditableTable from '@/components/YGCrm/DraggableEditableTable.vue'; // 假设组件文件路径

// 表格列配置（包含多种数据类型）
const tableColumns = ref([
  {
    title: '产品名称',
    dataIndex: 'name',
    dataType: 'input', // 文本输入框
    width: 200,
    placeholder: '请输入产品名称'
  },
  {
    title: '产品类型',
    dataIndex: 'type',
    dataType: 'radio', // 单选框组
    width: 160,
    options: [
      { label: '电子设备', value: 'electronic' },
      { label: '生活用品', value: 'daily' },
      { label: '食品饮料', value: 'food' }
    ]
  },
  {
    title: '销售状态',
    dataIndex: 'isActive',
    dataType: 'checkbox', // 复选框
    width: 120,
    label: '启用销售'
  },
  {
    title: '单价(元)',
    dataIndex: 'price',
    dataType: 'inputNumber', // 数字输入框
    width: 140,
    min: 0,
    step: 0.01,
    defaultValue: 0
  },
  {
    title: '分类标签',
    dataIndex: 'tags',
    dataType: 'list_multi', // 多选列表
    width: 220,
    options: [
      { label: '新品', value: 'new' },
      { label: '热销', value: 'hot' },
      { label: '折扣', value: 'discount' },
      { label: '限量', value: 'limited' }
    ]
  },
  {
    title: '供应商',
    dataIndex: 'supplier',
    dataType: 'sel_search', // 带搜索的选择器
    width: 200,
    options: [
      { label: '阿里巴巴供应链', value: '1001' },
      { label: '京东供应商平台', value: '1002' },
      { label: '苏宁采购中心', value: '1003' },
      { label: '本地厂家直供', value: '1004' },
      { label: '海外进口商', value: '1005' }
    ]
  },
  {
    title: '入库日期',
    dataIndex: 'stockDate',
    dataType: 'date', // 日期选择器
    width: 160,
    format: 'YYYY-MM-DD'
  },
  {
    title: '过期时间',
    dataIndex: 'expireTime',
    dataType: 'datetime', // 日期时间选择器
    width: 200,
    format: 'YYYY-MM-DD HH:mm:ss'
  },
  {
    title: '产品图片',
    dataIndex: 'images',
    dataType: 'image', // 图片上传
    width: 180,
    uploadUrl: '/api/upload/image', // 实际项目中替换为真实上传接口
    maxCount: 2
  },
  {
    title: '规格文件',
    dataIndex: 'specFile',
    dataType: 'file', // 文件上传
    width: 180,
    uploadUrl: '/api/upload/file', // 实际项目中替换为真实上传接口
    maxCount: 1
  },
  {
    title: '备注信息',
    dataIndex: 'remark',
    dataType: 'popup', // 弹出层编辑
    width: 160,
    popupTitle: '编辑备注',
    popupComponent: 'TextAreaPopup' // 自定义弹窗组件（需提前定义）
  }
]);

// 初始表格数据
const initialTableData = ref([
  {
    id: 1,
    name: '智能手表',
    type: 'electronic',
    isActive: true,
    price: 1299.99,
    tags: ['new', 'hot'],
    supplier: '1001',
    stockDate: '2024-01-15',
    expireTime: '2026-12-31 23:59:59',
    images: [],
    specFile: [],
    remark: '支持心率监测和GPS定位'
  },
  {
    id: 2,
    name: '纯棉毛巾',
    type: 'daily',
    isActive: true,
    price: 29.9,
    tags: [],
    supplier: '1002',
    stockDate: '2024-02-20',
    expireTime: '2027-05-30 23:59:59',
    images: [],
    specFile: [],
    remark: '新疆长绒棉材质'
  }
]);

// 事件处理函数
const handleDataChange = (newData) => {
  console.log('表格数据更新:', newData);
  // 实际项目中可在此处保存数据到后端
};

const handleRowAdded = (newRow) => {
  console.log('新增行:', newRow);
};

const handleRowDeleted = (deletedRow) => {
  console.log('删除行:', deletedRow);
};

const handleUploadSuccess = (uploadInfo) => {
  console.log('文件上传成功:', uploadInfo);
  // 可在此处处理上传后的文件路径保存逻辑
};
</script>

<style scoped>
.example-container {
  padding: 30px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

h2 {
  color: #1f2329;
  margin-bottom: 10px;
}

p {
  color: #6b7280;
  margin-bottom: 20px;
  font-size: 14px;
}
</style>